<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:insert="common/person-pc/header::personHeadBar('账户资源币充值','/static/css/person/shop.css,/static/css/person/tb_style.css')">
<body class="centre" style="">
<!-- 头部 -->
<!-- 头部信息 -->
<div th:insert="common/person-pc/top::personTopBar(${resCategoryModel})"/>
<div class="ey-body-bg">
    <div class="ey-body">
        <div class="ey-container w1200">
            <!-- 侧边 -->
            <div th:insert="common/person-pc/right::rightBar(${show})"/>
            <!-- 侧边结束 -->
            <!-- 中部 -->
            <div class="ey-con fr">
                <div class="el-main main-bg">
                    <div class="column-title mb20">
                        <div class="column-name">账户充值</div>
                    </div>
                    <form id="postForm" action="/" method="post">
                        <div class="item-from-row">
                            <div class="from-row-l">
                                账户余额 :
                            </div>
                            <div class="from-row-r">
                                ￥<span class="red fb">[[${nums}]]</span>元
                            </div>
                        </div>
                        <div class="item-from-row">
                            <div class="from-row-l">
                                充值金额 :
                            </div>
                            <div class="from-row-r">
                                <span>￥ <input type="text" class="el-input__inner w100" onkeyup="this.value=this.value.replace(/[^0-9\.]/g,'')" onafterpaste="this.value=this.value.replace(/[^0-9\.]/g,'')" name="money" value=""> 元</span>
                            </div>
                        </div>
                        <div class="item-from-row" id="div_zhifufangshi">
                            <div class="from-row-l">
                                支付方式 :
                            </div>
                            <div class="from-row-r">
                                <span>支付宝</span>
                                <span>微信</span>
                            </div>
                        </div>
                        <div class="el-row mt20 ">
                            <a href="JavaScript:void(0);" id="pay_btn" onclick="pay_money();" class="button2 el-button--primary"> 立即充值</a>
                        </div>
                    </form>
                </div>

            </div>
            <!-- 中部结束 -->
        </div>
    </div>
</div>

<script type="text/javascript">
    $(document).keydown(function (event) {
        if (event.keyCode == 13) {
            pay_money();
            return false;
        }
    });

    $(function () {
        $('input[name=money]').focus();
        // 默认支付方式
        var default_payment_type = $('#div_zhifufangshi .pay-type-item.active').attr('data-type');
        $('input[name=payment_type]').val(default_payment_type);
        // 支付类型选择
        $('#div_zhifufangshi .pay-type-item').click(function () {
            $(this).siblings().removeClass('active').end().addClass('active');
            $('input[name=payment_type]').val($(this).data('type'));
        });
    });

    function pay_money() {
        var money = $('input[name=money]');
        if ($.trim(money.val()) == '') {
            layer.msg('充值金额不能为空！', {icon: 5, time: 1000});
            money.focus();
            return false;
        } else if (isNaN($.trim(money.val()))) {
            layer.msg('请输入正确的充值金额！', {icon: 5, time: 1000});
            money.focus();
            return false;
        }
        if ($('input[name=payment_type]').val() == '') {
            layer.msg('请选择支付方式！', {icon: 5, time: 1000});
            return false;
        }

        layer_loading('正在处理');
        $.ajax({
            url: "/",
            data: $('#postForm').serialize(),
            type: 'post',
            dataType: 'json',
            success: function (res) {
                if (res.code == 1) {
                    if (0 == res.data.is_gourl) {
                        layer.closeAll();

                    } else {
                    }
                } else {
                    layer.closeAll();
                    showErrorAlert(res.msg, 0);
                }
            },
            error: function (e) {
                layer.closeAll();
                showErrorAlert(e.responseText);
            }
        });
    }



    var PayPolling;

    // 装载显示扫码支付的二维码
    function AlertPayImg(data) {
        var html = "<img src='"+data.url_qrcode+"' style='width: 250px; height: 250px;'><br/><span style='color: red; display: inline-block; width: 100%; text-align: center;'>正在支付中...请勿刷新</span>";
        layer.alert(html, {
            title: false,
            btn: [],
            success: function() {
                PayPolling = window.setInterval(function(){ OrderPayPolling(); }, 2000);
            },
            cancel: function() {
                window.clearInterval(PayPolling);
            }
        });
    }

    // 订单轮询
    function OrderPayPolling() {
        var pay_id = $('#PayID').val();
        var pay_mark = $('#PayMark').val();
        var pay_type = $('#PayType').val();
        if (!pay_id || !pay_mark || !unified_id || !unified_number || !transaction_type) {
            layer.msg('订单异常，刷新重试', {time: 1500}, function(){
                window.location.reload();
            });
        }
        $.ajax({
            url: JsonData.OrderPayPolling,
            data: {
                pay_id: pay_id,
                pay_mark: pay_mark,
                pay_type: pay_type,
                unified_id: unified_id,
                unified_number: unified_number,
                transaction_type: transaction_type
            },
            type:'post',
            dataType:'json',
            success:function(res){
                if (1 == res.code) {
                    if (res.data) {
                        layer_loading('订单处理中');
                        window.clearInterval(PayPolling);
                        if (2 == transaction_type) {
                            if (!res.data.mobile && !res.data.email) {
                                layer.closeAll();
                                layer.msg(res.msg, {time: 1500}, function() {
                                    window.location.href = res.url;
                                });
                            }
                            if (res.data.mobile) SendMobile(res.data.mobile);
                            if (res.data.email) SendEmail(res.data.email);
                        }
                        layer.closeAll();
                        layer.msg(res.msg, {time: 1500}, function() {
                            window.location.href = res.url;
                        });
                    }
                } else if (0 == res.code) {
                    layer.alert(res.msg, {icon:0, title: false, closeBtn: 0});
                }
            }
        });
    }

</script>

<!-- 底部 -->
<div class="ey-footer">
    <footer class="container">
        <p>Copyright © 2012-2018 知识付费网站 版权所有</p>
    </footer>
</div>
</body>
</html>
